{% extends "bootstrap5/admin/base.html" %}
{% block title %}导航网站 - 网站管理{% endblock %}

{% block content %}
<h1 class="mb-4">网站管理</h1>

<div class="row mb-4">
    <div class="col-md-6"><h2>所有网站</h2></div>
    <div class="col-md-6 text-end">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addWebsiteModal">添加网站</button>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped align-middle">
        <thead>
        <tr>
            <th>ID</th>
            <th>图片</th>
            <th>名称</th>
            <th>网址</th>
            <th>分类</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for website in websites %}
            <tr>
                <td>{{ website.id }}</td>
                <td>
                    {% if website.local_logo %}
                        <img src="{{ website.local_logo }}" alt="网站图片" style="width:50px; max-height:50px;">
                    {% elif website.logo %}
                        <img src="{{ website.logo }}" alt="网站图片" style="width:50px; max-height:50px;">
                    {% else %}
                        <img src="{{ url_for('static', filename='img/default.png') }}" alt="默认图片" style="width:50px; max-height:50px;">
                    {% endif %}
                </td>
                <td>{{ website.name }}</td>
                <td><a href="{{ website.url }}" target="_blank">{{ website.url }}</a></td>
                <td>{{ website.category.name }}</td>
                <td>{{ website.description|truncate(50) }}</td>
                <td>
                    <button class="btn btn-sm btn-warning"
                            data-bs-toggle="modal"
                            data-bs-target="#editWebsiteModal"
                            data-id="{{ website.id }}"
                            data-logo="{{ website.logo|e }}"
                            data-name="{{ website.name|e }}"
                            data-url="{{ website.url|e }}"
                            data-description="{{ website.description|e }}"
                            data-category="{{ website.category_id }}">
                        编辑
                    </button>
                    <a href="{{ url_for('admin.delete_website', website_id=website.id) }}"
                       class="btn btn-sm btn-danger"
                       onclick="return confirm('确定要删除这个网站吗？');">删除</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- 添加网站模态框 -->
<div class="modal fade" id="addWebsiteModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ url_for('admin.add_website') }}" enctype="multipart/form-data">
            <div class="modal-header">
                <h5 class="modal-title">添加网站</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">网站名称</label>
                    <input type="text" class="form-control" name="name" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">网址</label>
                    <input type="text" class="form-control" name="url" placeholder="https://example.com" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <input type="text" class="form-control" name="description" placeholder="网站介绍">
                </div>
                <div class="mb-3">
                    <label class="form-label">图片来源</label>
                    <select class="form-select" id="addImageSourceSelect">
                        <option value="url" selected>填写图片 URL</option>
                        <option value="upload">上传图片</option>
                    </select>
                </div>
                <div class="mb-3" id="addImageUrlGroup">
                    <label class="form-label">图片 URL</label>
                    <input type="text" class="form-control" name="logo" id="addWebsiteLogo" placeholder="https://example.com/logo.png">
                </div>
                <div class="mb-3 d-none" id="addImageUploadGroup">
                    <label class="form-label">上传图片</label>
                    <input type="file" class="form-control" name="logo_file" id="addWebsiteLogoFile" accept="image/*">
                </div>
                <div class="mb-3 text-center">
                    <img src="{{ url_for('static', filename='img/default.png') }}" id="addWebsiteLogoPreview" class="img-fluid rounded" style="max-height:100px;" alt="Logo 预览">
                </div>
                <div class="mb-3">
                    <label class="form-label">所属分类</label>
                    <select class="form-select" name="category_id" required>
                        {% for cat in categories %}
                            <option value="{{ cat.id }}">{{ cat.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">添加网站</button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑网站模态框 -->
<div class="modal fade" id="editWebsiteModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" id="editWebsiteForm" method="post" action="" enctype="multipart/form-data">
            <div class="modal-header">
                <h5 class="modal-title">编辑网站</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="editWebsiteId">
                <div class="mb-3">
                    <label class="form-label">网站名称</label>
                    <input type="text" class="form-control" name="name" id="editWebsiteName" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">网址</label>
                    <input type="text" class="form-control" name="url" id="editWebsiteUrl" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <input type="text" class="form-control" name="description" id="editWebsiteDescription">
                </div>
                <div class="mb-3">
                    <label class="form-label">图片来源</label>
                    <select class="form-select" id="editImageSourceSelect">
                        <option value="url" selected>填写图片 URL</option>
                        <option value="upload">上传图片</option>
                    </select>
                </div>
                <div class="mb-3" id="editImageUrlGroup">
                    <label class="form-label">图片 URL</label>
                    <input type="text" class="form-control" name="logo" id="editWebsiteLogo">
                </div>
                <div class="mb-3 d-none" id="editImageUploadGroup">
                    <label class="form-label">上传图片</label>
                    <input type="file" class="form-control" name="logo_file" id="editWebsiteLogoFile" accept="image/*">
                </div>
                <div class="mb-3 text-center">
                    <img src="{{ url_for('static', filename='img/default.png') }}" id="editWebsiteLogoPreview" class="img-fluid rounded" style="max-height:100px;" alt="Logo 预览">
                </div>
                <div class="mb-3">
                    <label class="form-label">所属分类</label>
                    <select class="form-select" name="category_id" id="editWebsiteCategory" required>
                        {% for cat in categories %}
                            <option value="{{ cat.id }}">{{ cat.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存修改</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const updateUrlTemplate = "{{ url_for('admin.update_website', website_id=0) }}";

    function previewImageFromInput(input, previewElement) {
        const file = input.files[0];
        if (file) {
            previewElement.src = URL.createObjectURL(file);
        }
    }

    // 添加网站切换图片来源
    document.getElementById('addImageSourceSelect').addEventListener('change', function () {
        const urlGroup = document.getElementById('addImageUrlGroup');
        const uploadGroup = document.getElementById('addImageUploadGroup');
        if (this.value === 'url') {
            urlGroup.classList.remove('d-none');
            uploadGroup.classList.add('d-none');
        } else {
            urlGroup.classList.add('d-none');
            uploadGroup.classList.remove('d-none');
        }
    });

    document.getElementById('addWebsiteLogo').addEventListener('input', function () {
        document.getElementById('addWebsiteLogoPreview').src = this.value.trim() || "{{ url_for('static', filename='img/default.png') }}";
    });

    document.getElementById('addWebsiteLogoFile').addEventListener('change', function () {
        previewImageFromInput(this, document.getElementById('addWebsiteLogoPreview'));
    });

    // 编辑网站模态框行为
    const editModal = document.getElementById('editWebsiteModal');
    editModal.addEventListener('show.bs.modal', function (event) {
        const btn = event.relatedTarget;
        const id = btn.getAttribute('data-id');
        const name = btn.getAttribute('data-name');
        const url = btn.getAttribute('data-url');
        const desc = btn.getAttribute('data-description');
        const logo = btn.getAttribute('data-logo');
        const catId = btn.getAttribute('data-category');

        document.getElementById('editWebsiteForm').action = updateUrlTemplate.replace('/0/', `/${id}/`);
        document.getElementById('editWebsiteName').value = name;
        document.getElementById('editWebsiteUrl').value = url;
        document.getElementById('editWebsiteDescription').value = desc;
        document.getElementById('editWebsiteLogo').value = logo || "";
        document.getElementById('editWebsiteCategory').value = catId;
        document.getElementById('editWebsiteLogoPreview').src = logo || "{{ url_for('static', filename='img/default.png') }}";
        document.getElementById('editImageSourceSelect').value = 'url';
        document.getElementById('editImageUrlGroup').classList.remove('d-none');
        document.getElementById('editImageUploadGroup').classList.add('d-none');
    });

    document.getElementById('editImageSourceSelect').addEventListener('change', function () {
        const urlGroup = document.getElementById('editImageUrlGroup');
        const uploadGroup = document.getElementById('editImageUploadGroup');
        if (this.value === 'url') {
            urlGroup.classList.remove('d-none');
            uploadGroup.classList.add('d-none');
        } else {
            urlGroup.classList.add('d-none');
            uploadGroup.classList.remove('d-none');
        }
    });

    document.getElementById('editWebsiteLogo').addEventListener('input', function () {
        document.getElementById('editWebsiteLogoPreview').src = this.value.trim() || "{{ url_for('static', filename='img/default.png') }}";
    });

    document.getElementById('editWebsiteLogoFile').addEventListener('change', function () {
        previewImageFromInput(this, document.getElementById('editWebsiteLogoPreview'));
    });
</script>
{% endblock %}
